<template>
  <div>
    <el-dialog
      title="新增客户"
      :visible.sync="dialogFormVisible"
      width="30%"
      style="text-align: left"
    >
      <table style="font-weight: bold">
        <tr>
          <td>
            <label for="label_11"
              >姓名: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="name"
              id="label_11"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_12">年龄:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="age"
              id="label_12"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_13">家庭住址:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="addr"
              id="label_13"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_17">爱好:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="hobby"
              id="label_17"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_14"
              >联系方式: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="phone"
              id="label_14"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_18"
              >客户来源: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-select v-model="come" placeholder="请选择" id="label_18">
              <el-option
                v-for="item in come_options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                style="width: 250px"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_20"
              >分配给: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-select v-model="desginer" placeholder="请选择" id="label_20">
              <el-option
                v-for="item in desginer_options"
                :key="item.id"
                :value="item.id"
                :label="item.name"
                style="width: 250px"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td><label for="label_15">下次回访:</label></td>
          <td>
            <el-select
              v-model="next_visit_day"
              placeholder="请选择"
              id="label_15"
            >
              <el-option
                v-for="item in next_visit_day_options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                style="width: 250px"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
      </table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddCustomer">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddCustomer",
  data() {
    return {
      dialogFormVisible: false,
      name: "",
      age: "",
      addr: "",
      phone: "",
      hobby: "", // 默认员工
      come: "", // 客户来源
      come_options: [
        { value: "1", label: "自然进店" },
        { value: "2", label: "网络来源" },
        { value: "3", label: "业务员来源" },
      ],
      next_visit_day: "3",
      next_visit_day_options: [
        { value: "3", label: "3 天后" },
        { value: "5", label: "5 天后" },
        { value: "7", label: "7 天后" },
      ],
      desginer: "",
      desginer_options: [],
    };
  },
  methods: {
    handleCheckIsNull() {
      let errMsg = "";
      this.name === "" ? (errMsg += "姓名不能为空, ") : "";
      this.phone === "" ? (errMsg += "联系方式不能为空, ") : "";
      this.come === "" ? (errMsg += "客户来源不能为空, ") : "";
      this.desginer === "" ? (errMsg += "分配谁不能为空, ") : "";
      return errMsg;
    },
    handleOpen() {
      this.dialogFormVisible = true;
      this.name = "";
      this.age = "";
      this.addr = "";
      this.phone = "";
      this.hobby = "";
      this.come = "";
      this.next_visit_day = "3";
      this.desginer = "";
      this.handleGetDesginer();
    },
    // 新增用户
    handleAddCustomer() {
      let err = this.handleCheckIsNull();
      if (err !== "") {
        this.$message({ type: "error", message: err });
        return false;
      }
      let reqData = {
        name: this.name,
        age: parseInt(this.age),
        addr: this.addr,
        phone: this.phone,
        hobby: this.hobby,
        come: this.come,
        next_visit_day: this.next_visit_day,
        user_id: this.desginer.toString(), // 分配设计师
      };
      this.AXIOS.post("/mycrmapi/customer/add", reqData)
        .then((resp) => {
          // console.log(resp)
          let statusCode = resp.data.status;
          if (statusCode === 1) {
            this.$message({ type: "success", message: "新增成功" });
            this.dialogFormVisible = false; // 关闭对话框
            // 调用父组件中的 handleInitCustomerListData, 刷新 list 数据
            this.$parent.handleInitCustomerListData();
          } else {
            this.$message({ type: "error", message: resp.data.msg });
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    handleGetDesginer() {
      this.AXIOS.get("/mycrmapi/user/getDesginer")
        .then((resp) => {
          console.log(resp);
          let statusCode = resp.data.status;
          if (statusCode === 1) {
            this.desginer_options = resp.data.data;
          } else {
            this.$message({ type: "error", message: "加载数据失败" });
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
  },
};
</script>

<style scoped>
</style>
